<input id="userid" hidden />
<div class="layui-card" style="max-height:400px;">
    <div class="layui-card-header">
        <h2 class="header-title">学习阶段进度表</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>学习阶段进度表</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <b>现阶段验收标准：</b>
            <button id="stage-btn-look" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查看</button>
            <button id="stage-btn-download" class="layui-btn icon-btn"><i class="layui-icon">&#xe601;</i>下载</button>
        </div>
        <table class="layui-table" id="learn-proccess-table" lay-filter="learn-proccess-table"></table>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="learn-proccess-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="look">查看学习总结</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="info">迭代内容</a>
</script>
<!--报表-->
<div id="contain" ></div>
<script>
    layui.use(['admin','table', 'config','layer'],function (){
        var admin = layui.admin,
            $ = layui.$,
            layer = layui.layer,
            config = layui.config,
            table = layui.table;

        var nickname,userid;
        admin.req('api-auth/oauth/userinfo', {}, function (data) {
            userid = data.user.id;
            nickname = data.user.nickname;
            $("#userid").val(userid);
        }, 'GET');
        // 下载按钮点击事件
        $('#stage-btn-download').click(function () {
            $.get(config.base_server + 'api-study/learnRate/query',
                {access_token: config.getToken().access_token,
                    userid:$("#userid").val()},function (data) {
                    var data = data.data;
                    var stcode = data[0].stcode;
                    $.post(config.base_server + 'api-study/stage/download',
                        {access_token: config.getToken().access_token,
                            stcode:stcode},function (data) {
                            // console.log(data);
                            if (data.code === 0){
                                layer.msg(data.msg, {icon: 1, time: 1000});
                            }else {
                                layer.msg(data.msg, {icon: 2, time: 1000});
                            }
                        })
                })

        });
        // 查看按钮点击事件
        $('#stage-btn-look').click(function () {
            $.get(config.base_server + 'api-study/learnRate/query',
                {access_token: config.getToken().access_token,
                userid:$("#userid").val()},function (data) {
                    var data = data.data;
                    var stcode = data[0].stcode;
                    getStcrit(stcode);
                })
        });
        function getStcrit(stcode) {
            $.get(config.base_server + 'api-study/stage/getList',
                {access_token: config.getToken().access_token,stcode:stcode},function (data) {
                    var data = data.data;
                    // console.log(data[0]);
                    showStcrit(data[0].stcrit);
                })
        }
        function showStcrit(data){
            admin.putTempData('stage_stcrit',data);
            admin.popupCenter({
                title:'验收标准',
                area:['700px','700px'],
                path: 'pages/learn/stcrit.html'
            });
        }
        // 渲染表格
        table.render({
            elem: '#learn-proccess-table',
            url: config.base_server + 'api-study/learnRate/query',
            method: 'GET',
            where: {
                access_token: config.getToken().access_token,
                userid:$("#userid").val()
            },
            page: true,
            cols: [[
                {type: 'numbers'},
                {field: 'stitle', title: '阶段名称'},
                {field: 'statim', title: '开始时间'},
                {field: 'endtim', title: '结束时间'},
                {field: 'days', title: '天数'},
                {align: 'center', toolbar: '#learn-proccess-table-bar', title: '操作'}
            ]],
            limits:[4],
            limit:4
        });

        table.on('tool(learn-proccess-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'look') { // 查看学习总结
                showEditModel(data);
            }else if (layEvent === 'info'){ // 查看修改迭代内容
                showIter(data);
            }
        });
        //显示表单弹窗
        var showEditModel = function (data) {
            admin.putTempData('t_learn_proccess', data);
            admin.popupCenter({
                title: '学习总结',
                path: 'pages/learn/summary.html',
                finish: function () {
                    table.reload('learn-proccess-table');
                }
            });
        };
        var showIter = function (data) {
            // console.log(data);
            admin.putTempData('t_learn_iter', data);
            admin.popupCenter({
                title: '迭代内容',
                area: ['75%','75%'],
                path: 'pages/learn/iter.html',
                finish: function () {
                    table.reload('learn-proccess-table');
                }
            });
        };
        //报表展示
        $.ajax({
            url: config.base_server + 'api-study/learnRate/query',
            data:{access_token: config.getToken().access_token,
                userid:$("#userid").val()},
            type:'get',
            success: function (data){
                var data = data.data;
                var xAxis = new Array();
                var series = new Array();
                for (var i=data.length-1;i>=0;i--){
                    xAxis.push(data[i].stitle);
                    series.push(data[i].days);
                }
                $('#contain').highcharts({
                    chart: {
                        type: 'line'                  //指定图表的类型，默认是折线图（line）
                    },
                    credits:{
                        enabled: false // 禁用版权信息
                    },
                    title: {
                        text: '阶段-天数表'                 // 标题
                    },
                    xAxis: {
                        categories: xAxis   // x 轴分类
                    },
                    yAxis: {
                        title: {
                            text: '天数'                // y 轴标题
                        }
                    },
                    series: [{                              // 数据列
                        name: nickname,                        // 数据列名
                        data: series                     // 数据
                    }]
                });
            }
        })





    });
</script>
